<template>
    <div class="box">
        <div style="position: relative;border: 1px solid pink;width: 660px;height: 220px;margin: auto;overflow: hidden;">
            <div style="display: flex; position: absolute;height: 200px;" :style="{left:contents+'px',width:width+'px'}">
                <img v-for="(item,i) in list" :key="i" :src="item.img" alt="" style="width: 200px;height: 200px;margin: 10px;">
            </div>
        </div>
        <el-button @click="LeftClick">向左</el-button>
        <el-button @click="RightClcik">向右</el-button>
    </div>
</template>
<script>
export default {
    data(){
        return {
            contents:-220,
            width:0,
            left:220,
            list:[
                {img:require('@/assets/snip1.png')},
                {img:require('@/assets/snip2.png')},
                {img:require('@/assets/snip3.png')},
                {img:require('@/assets/snip4.png')},
                {img:require('@/assets/snip5.png')},
                {img:require('@/assets/snip6.png')},
                {img:require('@/assets/snip7.png')},
                {img:require('@/assets/snip8.png')},
                {img:require('@/assets/snip9.png')},
                {img:require('@/assets/snip10.png')},
                {img:require('@/assets/snip11.png')},
                {img:require('@/assets/snip12.png')},
            ]
        }
    },
    mounted(){
        this.width = this.list.length * 200 + 20
        // this.widhtd =  this.list.length * 200
    },
    methods:{
        LeftClick(){
            console.log("点击了");
            if(this.contents != ('-'+this.width)){
                console.log("是否执行",-this.width);
                this.contents = this.contents - this.left
            }else{
                window.alert("已经是最后一张了")
            }
        },
        RightClcik(){
            if(this.contents != 0){
                this.contents = this.contents + this.left
            }else{
                window.alert("已经是第一张了")
            }
        }
    }
}
</script>